<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相册</title>
    <link rel="stylesheet" href="../css/album.css">
</head>
<body>
    <div class="container">
        <header></header>
        <nav>
            <a href="">用户信息</a>
            <a href="">关注</a>
            <a href="">粉丝</a>
            <a href="" class="curr">相册</a>
        </nav>
        <div class="main">
            <p class="tit">全部</p>
            <div class="alibum">
                <div class="alibumName">
                    <a name="default" class="curr" href="javascript:;">默认</a>
                    <!-- <a name="all" href="javascript:;">全部</a> -->
                </div>
                <div class="alibumBox">
                    <p>
                        <button class="createBtn btn btn-blue" type="button">创建相册</button>
                        <button class="uploadAlibum btn btn-green uploadAlibum">选择文件</button>
                        <input class="file" type="file"/>
                    </p>
                    <div class="alibuImages">
                        <!--
                        <div class="imageItem"><img src="../images/g1.jpg" alt=""><span>&Chi;</span></div>
                        <div class="imageItem"><img src="../images/g2.jpg" alt=""><span>&Chi;</span></div>
                        <div class="imageItem"><img src="../images/g3.jpg" alt=""><span>&Chi;</span></div>
                        <div class="imageItem"><img src="../images/g4.jpg" alt=""><span>&Chi;</span></div>
                        <div class="imageItem"><img src="../images/g5.jpg" alt=""><span>&Chi;</span></div>
                        <div class="imageItem"><img src="../images/g6.jpg" alt=""><span>&Chi;</span></div>
                        <div class="imageItem"><img src="../images/g7.jpg" alt=""><span>&Chi;</span></div>
                        <div class="imageItem"><img src="../images/g8.jpg" alt=""><span>&Chi;</span></div>
                        <div class="imageItem"><img src="../images/g9.jpg" alt=""><span>&Chi;</span></div>
                        <div class="imageItem"><img src="../images/g10.jpg" alt=""><span>&Chi;</span></div>
                        <div class="imageItem"><img src="../images/g11.jpg" alt=""><span>&Chi;</span></div>
                         -->
                    </div>
                    <div class="pagination">
                        <a href="javascript:;" class="prev">&lt;</a>
                        <!--
                        <a href="javascript:;" class="curr">1</a>
                        <a href="javascript:;">2</a>
                         -->
                        <a href="javascript:;" class="next">&gt;</a>
                    </div>
                </div>
            </div>
        </div>
        <footer></footer>
    </div>
    <script type="text/javascript">

        var pageSize = 2;
        var pageNumber = 1;
        var defaultAlibumArray = [];
        var allAlibumArray = [];

        // 初始化相册目录
        var alibumNameAele = document.querySelectorAll('.alibumName a');
        for(var x=0; x<alibumNameAele.length; x++){
            var itemAele = alibumNameAele[x];
            itemAele.addEventListener('click',function(e){
                setAlibumDatas(e);
            });
        }

        // 默认相册设置数据
        var alibumName = document.querySelector('.alibumName a[name="default"]');
        for(var s=0;s<11;s++){
            defaultAlibumArray.push('../images/g'+(s+1)+'.jpg');
        }
        alibumName.dataset.datas = defaultAlibumArray.join('@@');

        // 创建相册目录
        var createAibumBtn = document.querySelector('.createBtn');
        createAibumBtn.addEventListener('click',function(e){
            var sign = prompt('请输入目录的名称?');
            if(sign){
                var eleA = document.querySelector('.alibumName a.curr');
                var newAEle = document.createElement('a');
                newAEle.href= 'javascript:;';
                newAEle.innerHTML = sign.trim();
                addOrRemoveClass('');
                newAEle.className = 'curr';
                newAEle.dataset.datas = '';
                newAEle.addEventListener('click',function(ee){
                    addOrRemoveClass('');
                    newAEle.className = 'curr';
                    setAlibumDatas(ee);
                });
                eleA.after(newAEle);
                document.querySelector('.alibuImages').innerHTML = '';

                removePager();
                document.querySelector('.pagination').style.opacity = '0';
            }
        });

        // 设置相册数据
        function setAlibumDatas(e){
            var alibuImages = document.querySelector('.alibuImages').innerHTML = '';
            var datas = e.target.dataset.datas;
            if(datas){
                datas = datas.split('@@');
                document.querySelector('.pagination').style.opacity = '1';
            }else{
                datas = [];
                document.querySelector('.pagination').style.opacity = '0';
            }

            initAlibum(datas.slice(0,pageSize*pageNumber));
            initPagination(datas,pageSize,pageNumber);
        }

        // 相册上传文件
        var alibuImages = document.querySelector('.alibuImages');
        var fileInput = document.querySelector('.file');
        fileInput.addEventListener('change',function(e){
            var imageItem = document.createElement('div');
            var imageEle = document.createElement('img');
            var span = document.createElement('span');
            // alibuImages.append(imageItem);
            alibuImages.prepend(imageItem);
            imageItem.append(imageEle);
            imageItem.append(span);

            imageItem.className = 'imageItem';
            span.innerHTML = '&Chi;';
            var file = e.target.files[0];
            var reader = new FileReader(); //文件读取器
            reader.addEventListener('load',function(){
                imageEle.src = reader.result;
                var alibumNameAele = document.querySelectorAll('.alibumName a.curr')[0];
                var datas = alibumNameAele.dataset.datas || '';
                var dataArray = [];
                if(datas) {
                    dataArray = datas.split('@@');
                }
                // dataArray.push(reader.result);
                dataArray.unshift(reader.result);
                alibumNameAele.dataset.datas = dataArray.join('@@');
                initPagination(dataArray,pageSize,pageNumber);        //初始化分页
                initAlibum(dataArray.slice(0,pageSize*pageNumber));   //初始化相册
            },false);
            if (file) {
                reader.readAsDataURL(file);
            }
            span.addEventListener('click',function(e){
                e.target.parentNode.remove();
            });

        });

        // 删除图片
        var spanEle = document.querySelectorAll('.imageItem span');
        for(var j=0; j<spanEle.length; j++){
            spanEle[j].addEventListener('click',function(e){
                e.target.parentNode.remove();
            });
        }

        initPagination(defaultAlibumArray,pageSize,pageNumber);         //初始化分页
        initAlibum(defaultAlibumArray.slice(0,pageSize*pageNumber));    //初始化相册

        // 相册目录初始化点击事件
        document.querySelector('.alibumName a.curr').addEventListener('click',function(e){
            addOrRemoveClass('');
            e.target.className = 'curr';
            setAlibumDatas(e);
        });

        // 分页点击事件
        var paginationAele = document.querySelectorAll('.pagination a:not(:first-child):not(:last-child)');
        for(var y=0; y<paginationAele.length; y++){
            paginationAele[y].addEventListener('click',function(e){
                previousNextPageHadler('page',e);
            });
        }
        // 上一页
        document.querySelector('a.prev').addEventListener('click',function(e){
            previousNextPageHadler('prev');
        });
        //下一页
        document.querySelector('a.next').addEventListener('click',function(e){
            previousNextPageHadler('next');
        });

        // 分页添加或移除curr
        function addOrRemoveClass(className){
            className = className || '';
            var eleAele = document.querySelectorAll('.alibumName a');
            for(var i=0;i<eleAele.length; i++){
                var itemEle = eleAele[i];
                itemEle.className = className;
            }
        }

        //移除页码
        function removePager(){
            var pageAele = document.querySelectorAll('.pagination a:not(:first-child):not(:last-child)');
            for(var i=0;i<pageAele.length; i++){
                pageAele[i].remove();
            }
        }

        // 初始化分页
        function initPagination(array, pageSize,pageNumber){
            removePager();
            var pager = Math.ceil(array.length/pageSize);

            var next = document.querySelector('.pagination a.next');
            var eleArray = [];
            if(array.length>0){
                document.querySelector('.pagination').style.opacity = '1';
            }else{
                return;;
            }
            for(var i=0; i<pager; i++){
                var aEle = document.createElement('a');
                aEle.href = 'javascript:;';
                aEle.innerHTML = (i+1);
                if(i==0){
                    aEle.className = 'curr';
                }
                if(i<8){
                    next.before(aEle);
                }else if(i==8 && pager>10){
                    aEle.innerHTML = '&sdot;&sdot;&sdot;';
                    aEle.className = 'other';
                    next.before(aEle);
                }else if(i>8 && i==pager-1){
                    next.before(aEle);
                }

                aEle.addEventListener('click',function(e){
                    previousNextPageHadler('page',e);
                });
            }
        }

        // 初始化相册
        function initAlibum(array){
            var alibuImages = document.querySelector('.alibuImages');
            alibuImages.innerHTML = '';
            if(array.length==0){
                return;
            }

            for(var i=0;i<array.length; i++){
                var imageItem = document.createElement('div');
                var imageEle = document.createElement('img');
                var span = document.createElement('span');
                alibuImages.append(imageItem);
                imageItem.append(imageEle);
                imageItem.append(span);

                imageItem.className = 'imageItem';
                imageEle.src = array[i];
                span.innerHTML = '&Chi;';

                span.addEventListener('click',function(e){
                    e.target.parentNode.remove();
                });
            }
        }

        // 上下页处理
        function previousNextPageHadler(prevOrNext,e){
            var currAele = document.querySelector('.pagination a.curr');
            var currText = currAele.textContent;
            var datas = document.querySelector('.alibumName a.curr').dataset.datas;
            var dataArray = datas.split('@@');
            var pageNumber = 1;
            if(prevOrNext === 'prev'){
                var paginationAele = document.querySelectorAll('.pagination a:not(:first-child):not(:last-child)')
                if(currText===paginationAele[0].textContent){
                    return;
                }else{
                    currAele.previousElementSibling.className = 'curr';
                    pageNumber = parseInt(currAele.previousElementSibling.textContent);
                }
            }else if(prevOrNext === 'next'){
                if(parseInt(currText) === Math.ceil(dataArray.length/pageSize)){
                    return;
                }else{
                    currAele.nextElementSibling.className = 'curr';
                    pageNumber = parseInt(currAele.nextElementSibling.textContent);
                }
            }else{
                var className = e.target.className;
                if(className=='curr'){
                    return;
                }
                var paginationAele = document.querySelector('.pagination a');
                for(var k=0; k<paginationAele.length;k++){
                    paginationAele[k].className = '';
                }

                if(className==''){
                    e.target.className = 'curr';
                }
                pageNumber = parseInt(e.target.textContent);
            }
            currAele.className = '';
            initAlibum(dataArray.slice((pageNumber-1)*pageSize,pageNumber*pageSize));
        }

    </script>
</body>
</html>
